<!-- 疫病每日统计 -->
<template>
  <div class="BhEveryCount-wrap">
    <el-scrollbar class="custom-el-scrollbar" style="height: 100%;">
      <div class="bh-infos">
        <div class="item city">
          <span class="city">{{datas.cityname}}</span>
          <span class="range">{{datas.counttime}}</span>
        </div>
        <div class="list">
          <div class="l-item" v-for="item in iconDatas">
            <div class="icon"></div>
            <div class="info">
              <div class="num" :class="item.className">{{datas[item.key]}}</div>例
              <div> {{item.title}}</div>
            </div>
          </div>

     <!--     <div class="l-item">
            <div class="icon"></div>
            <div class="info">
              <span class="num" style="color: #e9392b;">{{datas.totalnum}}</span>例
              <br>累计确诊病例
            </div>
          </div>
          <div class="l-item">
            <div class="icon"></div>
            <div class="info">
              <span class="num" style="color: #f49530;">{{datas.totalsuspectednum}}</span>例
              <br>累计疑似病例
            </div>
          </div>
          <div class="l-item">
            <div class="icon"></div>
            <div class="info">
              <span class="num" style="color: #f46331;">{{datas.newnum}}</span>例
              <br>新增确诊病例
            </div>
          </div>
          <div class="l-item">
            <div class="icon"></div>
            <div class="info">
              <span class="num" style="color: #e3c10c;">{{datas.newsuspectednum}}</span>例
              <br>新增疑似病例
            </div>
          </div>-->
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import moment from 'moment';
import { bhfbServer } from '@/api/installServer';
import publishObjectPath from '@/util/configRegistry';
const districtCode = publishObjectPath.value.districtCode;
const districtName = publishObjectPath.value.districtName

@Component({
  name: 'BhEveryCount',
  components: {}
})
export default class BhEveryCount extends Vue {
  private currDate: any = '';
  private datas: any = {
    cityName: districtName,
    totalNum: '0',
    newNum: '0',
    totalSuspectedNum: '0',
    newSuspectedNum: '0'
  };
  private  iconDatas: any = [

      {
          title:"新增确诊",
          className:"redClass",
          key:"newnum"
      },
      {
          title:"新增疑似",
          className:"orangeClass",
          key:"newsuspectednum"
      },
      {
          title:"新增死亡",
          className:"whiteClass",
          key:"increasedeath"
      },
      {
          title:"新增治愈出院",
              className:"greenClass",
          key:"increasecure"
      },
      {
          title:"累计确诊",
          className:"redClass",
          key:"totalnum"
      },
      {
          title:"累计疑似",
          className:"orangeClass",
          key:"totalsuspectednum"
      },
      {
          title:"累计死亡",
          className:"whiteClass",
          key:"totoldeath"
      },
      {
          title:"累计治愈出院",
          className:"greenClass",
          key:"totalcure"
      },
  ];




  private mounted() {
    this.initData();
  }
  private initData() {
    this.currDate =
      moment(new Date((new Date() as any) - 24 * 60 * 60 * 1000)).format(
        'YYYY年MM月DD日'
      ) + '0时 ~ 24时';
    let params = {};
    params = {
      districtCode: districtCode // 默认用武汉市 后续使用vuex通信
    };
    bhfbServer.getYqEveryCount(params).then((res: any) => {
      if (res.data && res.data.data && res.data.data.length) {
        this.datas = res.data.data[0];
      }
    });
  }
}
</script>
<style lang="less" scoped>
.BhEveryCount-wrap {
  width: 100%;
  height: 105%;
  padding: 0 6px;
  box-sizing: border-box;
  .bh-infos {
    .item {
      font-size: 18px;
      color: #fff;
      margin: 4px 0 2px 0px;
      .city {
        margin-right: 30px;
        color: #c2e7f2;
      }
      .range {
        color: #ffe92c;
      }
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      .l-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &:nth-child(1) {
          .icon {
            background-image: url('../../../assets/img/layout/every_1.png');
          }
        }
        &:nth-child(2) {
          .icon {
            background-image: url('../../../assets/img/layout/every_2.png');
          }
        }
        &:nth-child(3) {
          .icon {
            background-image: url('../../../assets/img/layout/every_3.png');
          }
        }
        &:nth-child(4) {
          .icon {
            background-image: url('../../../assets/img/layout/every_4.png');
          }
        }
        &:nth-child(5) {
          .icon {
            background-image: url('../../../assets/img/layout/every_5.png');
          }
        }
        &:nth-child(6) {
          .icon {
            background-image: url('../../../assets/img/layout/every_6.png');
          }
        }
        &:nth-child(7) {
          .icon {
            background-image: url('../../../assets/img/layout/every_7.png');
          }
        }
        &:nth-child(8) {
          .icon {
            background-image: url('../../../assets/img/layout/every_8.png');
          }
        }
        .icon {
          width: 60px;
          height: 60px;
          background: url('../../../assets/img/layout/every_1.png') no-repeat
            center center;
          margin: 5px 0;
        }
        .info {
          color: #c2e7f2;
          font-size: 14px;
          text-align: center;
          .num {
            font-size: 20px;
            display: inline-block;
          }
        }
      }

      .redClass{
        color:#ce3636 ;
        font-weight: bolder;
      }
      .orangeClass{
        color:#ee8240;
        font-weight: bolder;
      }
      .whiteClass{
        color:#86a5b1 ;
        font-weight: bolder;
      }
      .greenClass{
        color:#1dfe8d ;
        font-weight: bolder;
      }
    }
  }
}
</style>
<style lang="less">
.custom-el-scrollbar {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
</style>
